<template>
  <!-- 页面管理 -->
  <div>
    <!-- <div>页面管理</div> -->
    <div class="m-page-box">
      <Table :columns="columns" :data="menuList" :loading="loading"></Table>
      <div class="m-page-buttom">
        <Page
          :total="menuLen"
          :page-size="pageSize"
          :page-size-opts="[5, 10, 15]"
          :show-sizer="true"
          @on-change="changePage"
          @on-page-size-change="changePageSize"
        ></Page>
      </div>
    </div>

    <editPage :pageId="pageId" :showModal="editModal" @closeModal="showEdit = false" @reload="reload"></editPage>
    <!-- 修改页面信息 -->
  </div>
</template>

<script>
import { mapActions } from 'vuex'
import { columns } from './js/columns'
import editPage from './handlePage/editPage.vue'
export default {
  inject: ['reload'],
  components: {
    editPage
  },
  data () {
    return {
      menuList: [],  // 菜单列表
      columns: columns(this),   //表格头
      menuLen: 0,     // 总数据长度
      pageSize: 5,
      loading: false,    // 表格是否加载中
      pageId: '',   //传递给Modal的pageId
      showEdit: false,   // 修改路由
    }
  },
  computed: {
    editModal () {
      return this.showEdit
    }
  },
  mounted () {
    this._getMenuInfo()
  },
  methods: {
    // 切换页面
    changePage (page) {
      this._getMenuInfo(page, this.pageSize)
    },
    // 修改每页页数
    changePageSize (pageSize) {
      this.pageSize = pageSize
      this._getMenuInfo(1, pageSize)
    },
    // 编辑页面
    editPage (row) {
      this.pageId = row.id += ''
      this.showEdit = true
    },
    // 删除页面
    deletePage (id) {
      this._deletePage(id)
      this.changePage(1)
      this.reload()
    },
    // 获取总菜单列表
    async _getMenuInfo (page, pageSize) {
      this.loading = true
      const url = "menuinfo"
      let Page = page || 1
      let PageSize = pageSize || 5
      const res = await this.GET_DATA({
        dataUrl: url,
        page: Page,
        pageSize: PageSize,
        isAll: 0
      })
      if (res) {
        this.$nextTick(() => {
          this.menuList = res.data.menuList
          this.menuLen = res.data.size
          this.loading = false
        })
      }
    },
    // 删除页面接口
    async _deletePage (id) {
      const url = 'deletemenu'
      const res = await this.GET_DATA({
        dataUrl: url,
        id: id
      })
      if (res) {
        res.code === '0000' && this.$Message.success('操作成功')
      }
    },
    ...mapActions({
      GET_DATA: 'GET_DATA',
    })
  }
}
</script>

<style lang="scss">
.m-page-box {
  border: 1px solid #dcdee2;
  margin: 10px;
  position: relative;
  .m-page-buttom {
    position: absolute;
    right: 0;
    margin-top: 10px;
  }
}
</style>